//图标
import {
    LockOutlined,
    UserOutlined
} from '@ant-design/icons';


import React, { Component } from 'react'
import styles from './Login.scss'
import axios from "axios";
import {Dashboard} from "../index";
const bg = {
    with: '100vw',
    height: '100vh',
    backgroundSize: '100vw 100vh',
    background:("../assets/timg.jpg")
}

export default class Logins extends Component {
    constructor(){
        super();
        this.state={
            account:"",
            pwd:"",
            isaccount:false,
            ispwd:false
        }
    }
    changes=(even)=>{
        this.setState({
            [even.target.name]:even.target.value
        })
    }
    iaccount=()=>{
        let reg = /^\w{6,16}$/;
        let checkaccount = reg.test(this.state.account)
        if(this.state.account === "" || !checkaccount){
            this.setState({
                isaccount:true
            })
        }else{
            this.setState({
                isaccount:false
            })
        }
    }
    ipwd = ()=>{
        let regc = /^[0-9a-zA-Z]{6,16}$/;
        let checkpwd = regc.test(this.state.pwd)
        if(this.state.pwd === "" || !checkpwd){
            this.setState({
                ispwd:true
            })
        }else{
            this.setState({
                ispwd:false
            })
        }
    }
    enter = ()=>{
        let {account,pwd,isaccount,ispwd} =this.state;
        if(account !== "" && pwd !== "" && isaccount === false && ispwd===false){
            const params = new URLSearchParams();
            params.append('account', account);
            params.append('adminPwd', pwd);
            axios.post("http://class.aulence.com/store-manage/w2003/admin_sign-in.php", params).then(res => {
                if(res.data.toString().indexOf("错误")!==-1){
                    alert(res.data)
                }else{
                    console.log(res.data);
                    sessionStorage.setItem('user',JSON.stringify(res.data));
                    this.props.monkey( {
                        pathname:'/admin/dashboard',
                        component:Dashboard,
                        title:'主页',
                        isNav:true,
                        icon:'dot-chart'
                    });
                    this.props.open( {
                        pathname:'/admin/dashboard',
                        component:Dashboard,
                        title:'主页',
                        isNav:true,
                        icon:'dot-chart'
                    });
                }
            }).catch(err => {
                console.error(err);
            });
        }else{
            alert("请将账号和密码正确输入后点击登录")
        }
    }
    render() {
        let {account,pwd,isaccount,ispwd} =this.state;
        return (
            <div>
                <div className={styles.box}>
                    <div style={bg}>
                        <div className={styles.box1}>
                            <div className={styles.ind}>
                                <div>
                                    <label>用户名</label><br/>
                                    <UserOutlined className={styles.move}/>
                                    <input type='text' placeholder='请输入账号' name="account" value={account}  onChange={this.changes} onBlur={this.iaccount} />
                                    {isaccount ? <span className={styles.pan}>用户名格式错误请重新填写(输入6-16数字跟字母)</span> : null}
                                </div>
                                <div>
                                    <label>密码</label><br/>
                                    <LockOutlined className={styles.move}/>
                                    <input type='password' placeholder='请输入密码' name="pwd" value={pwd} onChange={this.changes} onBlur={this.ipwd}  />
                                    {ispwd ? <span className={styles.pan}>密码填写错误请重新填写(输入6-18个密码)</span> : null}
                                </div>
                                <p>还没有账号？快去<span onClick={()=>this.props.btns()}>注册</span>一个吧</p>
                                <p className={styles.btn} onClick={this.enter}>登录</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
